<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { getGreenhouseInfo } from '@/api/greenhouse';
import { getSoilSensorsData } from '@/api/sensor';
import { ElMessage } from 'element-plus';
import SensorDetailChart from '@/components/SensorDetailChart.vue';

export default {
  name: 'LeftTop',
  components: {
    SensorDetailChart
  },
  setup() {
    const greenhouseInfo = ref({
      name: '',
      area: 0,
      address: '',
      deviceCount: 0,
      soilData: {
        nitrogen: 0,
        phosphorus: 0,
        potassium: 0
      }
    });

    // 添加全屏图表状态
    const showDetailChart = ref(false);
    const currentSensorType = ref('');
    const currentSensorValue = ref(0);

    // 点击传感器数据项
    const handleSensorClick = (type, value) => {
      currentSensorType.value = type;
      currentSensorValue.value = value;
      showDetailChart.value = true;
    };

    // 关闭图表
    const closeDetailChart = () => {
      showDetailChart.value = false;
      currentSensorType.value = '';
      currentSensorValue.value = 0;
    };

    // 获取大棚信息和传感器数据
    const fetchData = async () => {
      try {
        // 获取大棚基本信息
        const greenhouseRes = await getGreenhouseInfo();
        console.log('Greenhouse info response:', greenhouseRes);

        if (greenhouseRes.code === 200 && greenhouseRes.data) {
          // 获取传感器数据
          const sensorData = await getSoilSensorsData();
          console.log('Sensor data:', sensorData);

          greenhouseInfo.value = {
            name: greenhouseRes.data.name || '',
            area: greenhouseRes.data.area || 0,
            address: greenhouseRes.data.address || '',
            deviceCount: greenhouseRes.data.devices?.length || 0,
            soilData: sensorData
          };
          console.log('Updated greenhouse info:', greenhouseInfo.value);
        }
      } catch (error) {
        console.error('获取数据失败:', error);
        ElMessage.error('获取数据失败');
      }
    };

    // 定时刷新数据
    onMounted(() => {
      fetchData();
      // 每分钟更新一次数据
      const timer = setInterval(fetchData, 60000);

      // 组件卸载时清除定时器
      onBeforeUnmount(() => {
        clearInterval(timer);
      });
    });

    return {
      greenhouseInfo,
      showDetailChart,
      currentSensorType,
      currentSensorValue,
      handleSensorClick,
      closeDetailChart
    };
  }
}
</script>

<template>
  <div class="left-top">
    <dv-border-box-10 :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
      <div class="content-wrapper">
        <div class="header">
          <div class="title-container">
            <dv-decoration3 class="decoration-left" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
            <dv-border-box-2 class="title-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
              <div class="title">青枣园环境数据实时监测</div>
            </dv-border-box-2>
            <dv-decoration3 class="decoration-right" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
          </div>
        </div>
        <div class="content">
          <div class="data-row">
            <div class="data-item">
              <dv-border-box-9 class="data-border" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
                <div class="data-content">
                  <div class="label">智慧大棚号</div>
                  <div class="value">
                    <span class="number">{{ greenhouseInfo.name }}</span>
                  </div>
                </div>
              </dv-border-box-9>
            </div>
            <div class="data-item">
              <dv-border-box-9 class="data-border" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
                <div class="data-content">
                  <div class="label">占地面积</div>
                  <div class="value">
                    <span class="number">{{ greenhouseInfo.area }}</span>
                    <span class="unit1">亩</span>
                  </div>
                </div>
              </dv-border-box-9>
            </div>
            <div class="data-item">
              <dv-border-box-9 class="data-border" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
                <div class="data-content">
                  <div class="label">所在位置</div>
                  <div class="value">{{ greenhouseInfo.address }}</div>
                </div>
              </dv-border-box-9>
            </div>
            <div class="data-item">
              <dv-border-box-9 class="data-border" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
                <div class="data-content">
                  <div class="label">设备数量</div>
                  <div class="value">
                    <span class="number">{{ greenhouseInfo.deviceCount }}</span>
                    <span class="unit1">个</span>
                  </div>
                </div>
              </dv-border-box-9>
            </div>
          </div>
          <div class="data-row">
            <dv-border-box10 class="data-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0)']"
              @click="handleSensorClick('light', greenhouseInfo.soilData.nitrogen)">
              <div class="box-content">
                <div class="box-value">
                  <span class="number">{{ greenhouseInfo.soilData.nitrogen }}</span>
                  <span class="unit2">MG/KG</span>
                  <span class="unit1">良</span>
                </div>
                <dv-border-box6 class="dv-border-6" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
                  <div class="box-label">光照</div>
                </dv-border-box6>
              </div>
            </dv-border-box10>

            <dv-border-box10 class="data-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0)']"
              @click="handleSensorClick('co2', greenhouseInfo.soilData.phosphorus)">
              <div class="box-content">
                <div class="box-value">
                  <span class="number">{{ greenhouseInfo.soilData.phosphorus }}</span>
                  <span class="unit2">MG/KG</span>
                  <span class="unit1">良</span>
                </div>
                <dv-border-box6 class="dv-border-6" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
                  <div class="box-label">二氧化碳</div>
                </dv-border-box6>
              </div>
            </dv-border-box10>

            <dv-border-box10 class="data-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0)']"
              @click="handleSensorClick('ph', greenhouseInfo.soilData.potassium)">
              <div class="box-content">
                <div class="box-value">
                  <span class="number">{{ greenhouseInfo.soilData.potassium }}</span>
                  <span class="unit2">MG/KG</span>
                  <span class="unit1">良</span>
                </div>
                <dv-border-box6 class="dv-border-6" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
                  <div class="box-label">土壤PH值</div>
                </dv-border-box6>
              </div>
            </dv-border-box10>
          </div>
        </div>
      </div>
    </dv-border-box-10>

    <!-- 全屏图表组件 -->
    <SensorDetailChart :visible="showDetailChart" :sensor-type="currentSensorType" :current-value="currentSensorValue"
      @close="closeDetailChart" />
  </div>
</template>

<style scoped>
/* 原有的样式保持不变，只添加点击效果 */
.data-box {
  cursor: pointer;
  transition: all 0.3s ease;
}

.data-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 255, 217, 0.3);
}

.data-box:hover .box-value .number {
  color: #ffeb3b;
  text-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
}

/* 其他原有样式保持不变 */
.left-top {
  width: 100%;
  height: 100%;
  padding: 0;
}

.content-wrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 28, 36, 0.5);
  padding: 8px;
  border-radius: 4px;
}

.header {
  margin-bottom: 8px;
  width: 100%;
}

.title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-box {
  width: fit-content;
  height: 40px;
  padding: 0 30px;
}

.title {
  color: #00ffd9;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 10px;
  line-height: 40px;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.data-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 100%;
}

.data-item {
  flex: 1;
  height: 80px;
}

.data-border {
  width: 100%;
  height: 100%;
  padding: 4px;
  --border-color: #00ffd9;
  --border-alpha: 0.3;
}

:deep(.dv-border-box-13) {
  width: 100%;
  height: 100%;
  padding: 4px;
  --border-color: #00ffd9;
  --border-alpha: 0.3;
}

.data-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.label {
  color: #ffffff;
  font-size: 14px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.value {
  color: #00ffd9;
  font-size: 16px;
}

.value .number {
  color: #FF6B6B;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}

.unit1 {
  font-size: 16px;
  margin-left: 4px;
  font-weight: bold;
  background-color: rgba(0, 255, 217, 0.1);
  padding: 2px 4px;
  border-radius: 10px;
  color: #00ffd9;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.unit2 {
  font-size: 10px;
  margin-left: 4px;
  font-weight: bold;
  background-color: rgba(0, 255, 217, 0.1);
  padding: 2px 4px;
  border-radius: 10px;
  color: #00ffd9;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.data-box {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 115px;
  padding: 12px;
  text-align: center;
  background: rgba(0, 28, 36, 0.3);
  border-radius: 4px;
  --border-color: #00ffd9;
  --border-alpha: 0.3;
}

.box-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box-value {
  color: #00ffd9;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.box-value .number {
  color: #FF6B6B;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}

.box-label {
  color: #ffffff;
  font-size: 14px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}

.dv-border-6 {
  margin-top: 8px;
  display: flex;
  width: 125px;
  height: 30px;
  --border-color: #00ffd9;
  --border-alpha: 0.3;
}

.decoration-left,
.decoration-right {
  width: 100px;
  height: 20px;
}
</style>